<!--
/***********************************
*
* author:huanglei
* mail:code.huanglei@gmail.com
* version:0.2
*
***********************************/
-->

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" media="screen" href="css/atuanzhang.css">
	<script src="js/jquery.js" type="text/javascript" language="javascript" charset="utf-8" ></script>
  	<script type="text/javascript" language="javascript" charset="utf-8">
  	// <![CDATA[
  	
		var HTML_OPTION = 'options.html';
		var GOODS_LI = "<li class='goods' title='#title#' website='#website#'><h1 class='goodsTitle fontColor2'><span class='fontColor'>【#website#】</span>#title#</h1><div><a href=\"javascript:openUrl('#loc#')\" ><img class='goodsImg' src='#image#' /></a></div><div class='goodsIntro'><span class='goodsPrice fontColor'>￥#price#</span><span class='goodsValue'>￥#value#</span>#rebate#折</div><!--<div class='goodsBar'><a href='javascript:void(0);' onclick='goodsMap();' class='bar_map' title='稍候开放'></a></div>--></li>";
	    var CITY_LI = "<li class='city' ><a href='javascript:void(0)' onclick=loadGoods('#city#'); pinyin='#pinyin#'>#city#</a></li>";
	    
		var asynJsFrame = null;
		var showPager = false;
		var showLoading = false;
        var page = 0;
    
  		function init(){
			 asynJsFrame = $('#asynJsFrame')[0];
			 loadCity();
			 loadGoods('',page);
  		};
		
		function goodsHandle(status,goods){
		    if (status != 200){
		        if (showLoading){
		            $('#errorDir').html(data);
		        } else {
		            
		        }
		        return;
		    }
            
            var goodsArr = [],
                oldGw = $('#gwDiv').html();
                
		    for(var i=0; i<goods.length; i++){
		        var rebate = Math.round(goods[i].price/goods[i].value * 100)/10;
                goodsArr.push(GOODS_LI.replace(/#website#/g,goods[i].website)
                    .replace(/#title#/g,goods[i].title)
                    .replace(/#loc#/,encodeURI(goods[i].loc))
                    .replace(/#image#/,goods[i].image)
                    .replace(/#value#/,goods[i].value)
                    .replace(/#price#/,goods[i].price)
                    .replace(/#rebate#/,isNaN(rebate)?0:rebate));
            }
            
            $('#gwDiv').html('<ul>' + goodsArr.join('')+'</ul>');
            //$('#curCityDiv').innerHTML = city;
            if (showLoading){
                $('#loadingDiv').css('display','none');
            }
		}
		
		/**
		 * city handle
		 */
		function cityHandle(status,data){
		    if (status != 200){
		        return;
		    }
		    var tmp = "<li class='clear fontColor bold'>热门城市</li>";
            var hotCitys = data.hotCitys;
            for(var i=0; i<hotCitys.length; i++){
                tmp += CITY_LI.replace(/#city#/g,hotCitys[i]);
            }
            tmp += "<li class='clear borderBottom'><li>";

            var cityData = '';
            var p = null;
            var o = '';
        
            var citys = data.citys;
            for(var i=0; i<citys.length; i++){
                p = citys[i].city_pinyin.substr(0,1);
                if ( o !== p){
                    tmp += "<li class='clear fontColor bold'><a name='"+p.toUpperCase()+"'>"+p.toUpperCase()+"</a></li>";
                    o = p;
                }
                tmp += CITY_LI.replace(/#city#/g,citys[i].city);
                tmp = tmp.replace(/#pinyin#/g,citys[i].city_pinyin);
            }
            cityData =  '<ul>'+tmp+'</ul>';
            $('#cdwDiv').html(cityData); 
		}
		
		function loadGoods(city){
		    if (page == 0){
		        $('#loadingDiv').css('display','block');
		        showLoading = true;
		    }
			asynJsFrame.contentWindow.loadGoods(city,page++,goodsHandle);
			$('#curWebSite').html('全部');
		}
		
		function loadCity(){
			asynJsFrame.contentWindow.loadCity(cityHandle);
		}
		
		/*UnSupported*/
		function goodsMap(){
 			
		}
		
		/**
		 *
		 */
  		function openUrl(url){
  			chrome.tabs.create({url:url});
  		}
  		
  		function openOptions() {
			var fullUrl = chrome.extension.getURL(HTML_OPTION);
			chrome.tabs.getAllInWindow(null, function(tabs) {
				for (var i in tabs) { // check if Options page is open already
					var tab = tabs[i];
					if (tab.url == fullUrl) {
						chrome.tabs.update(tab.id, { selected: true }); // select the tab
						return;
					}
				}
				chrome.tabs.getSelected(null, function(tab) { // open a new tab next to currently selected tab
					chrome.tabs.create({
						url: url,
						index: tab.index + 1
					});
				});
			});
		}
		
		function onScroll(){
		    var scrollTop = parseInt($('#gwDiv').scrollTop());
		    if (scrollTop > (1500 * page)){
		        if (showPager) return;
		        $('#pwDiv').css('display','block');
		        showPager = true;
		    } else {
		        if (!showPager) return;
		        $('#pwDiv').css('display','none');
		        showPager = false;
		    }
		}
 
  	// ]]>
  	</script>
  </head>
  <body onload='init();'>
	<div id="loadingDiv">
		<div class="loadingWrapper">
			<div id='errorDir' class='fontColor'>Loading...<img src="img/loading.gif" /></div>
		</div>
	</div>
  	<div class="wrapper">
  		<div class="navWrapper" >
  			<div class="logoWrapper">
  				<img src="img/logo.png" />
  			</div>
			<div class="cityWrapper">
				<div class="cityBgWrapper">
					<div id="cdwDiv" class="cityDataWrapper"><ul><li>正在加载城市列表</li></ul></div>
				</div>
				<b id="curCityDiv">上海</b> 
			</div>
			<!-- 取消此功能
	  		<div class="webSiteWrapper">
	  			 <span id="curWebSite" onclick="showWebSite();">全部</span>
	  			 <ul id="swDiv" class='displayNone'>
				</ul>
	  		</div>
	  		-->
  		</div>
	  	<div id="gwDiv" class="goodsWrapper" onScroll="onScroll()"></div>
	  	<div id="pwDiv" class="pagerWrapper"><a href="javascript:loadGoods('上海')">下一页</a></div>
	  	<div class="footWrapper">
	  		 <span class="set"><a href="javascript:void(0)" onclick="openUrl('http://www.atuanzhang.com/atuanzhang')">我要说</a></span><span class="cpy">copyright @2011 by huanglei </span>
	  	</div>
	</div>
	<iframe id="asynJsFrame" src="asyn_js.html" style="display:none;"></iframe>	
  </body>
</html>
